<template>
	<view v-if="isshow">
		<!-- 立即购买，加入购物车 -->
		<view class="lkbuydiv" @click="clickcloseSku"></view>
		<view class="lkbuy fadelogIn">
			<scroll-view :scroll-y="true" style="height: 78%;" :scroll-with-animation="true">
				<view class="listItem">
					<image src="/static/icon/sku_close.png" @click="clickcloseSku" class="sku_close" />
					<image :src="goodsImgurl" mode="aspectFill"></image>
					<view class="contentBox">
						<view class="priceBox">
							¥
							<text>{{ goodsPrice }}</text>
						</view>
						<view class="goodsStock">库存 {{ goodsStock }}</view>
						<view class="service" v-if="goodsName">已选：{{ goodsName }}</view>
						<view class="service" v-else>
							请选择
							<!-- <text :decode="true" v-if="goodsobj.specIdFirstName">&ensp;{{ goodsobj.specIdFirstName }}</text> -->
						</view>
					</view>
				</view>

				<view class="skudiv" v-if="goodsSku.length > 0" v-for="(skuitem,skuindex) in goodsSku" :key="skuindex">
					<view class="skutext">{{ skuitem.skuName?skuitem.skuName:"规格" }}</view>
					<view v-if="skuindex==0" v-for="(item, index) in skuitem.skuValList" :key="index" style="display: inline-block;margin-bottom: 10rpx;">
						<view :class="skuindex1 == index ? 'divitem_cur' : 'divitem'" @click="clickSku1(skuindex,index)">
							<view class="itemtext">{{item.skuVal}}</view>
						</view>
						<!-- <view class="divitem_no" v-if="!item.canSelct">
							<view class="itemtext">【疗程装】原品6盒装+同溢堂 益安宁丸144丸</view>
						</view> -->
					</view>
					<view v-if="skuindex==1" v-for="(item, index) in skuitem.skuValList" :key="index" style="display: inline-block;margin-bottom: 10rpx;">
						<view :class="skuindex2 == index ? 'divitem_cur' : 'divitem'" @click="clickSku2(skuindex,index)">
							<view class="itemtext">{{item.skuVal}}</view>
						</view>
						<!-- <view class="divitem_no" v-if="!item.canSelct">
							<view class="itemtext">【疗程装】原品6盒装+同溢堂 益安宁丸144丸</view>
						</view> -->
					</view>
				</view>
				<!-- <view class="skudiv" v-if="goodsSku2.length > 0">
					<view class="skutext">{{ goodsobj.specIdTwoName?goodsobj.specIdTwoName:"规格" }}</view>
					<view v-for="(item, index) in goodsSku2" :key="item.index" style="display: inline-block;margin-bottom: 10rpx;">
						<view :class="skuindex2 == index ? 'divitem_cur' : 'divitem'" @click="clickSku2(index)" v-if="item.canSelct">
							<view class="itemtext">{{ item.optionName }}</view>
						</view>
						<view class="divitem_no" v-if="!item.canSelct">
							<view class="itemtext">{{ item.optionName }}</view>
						</view>
					</view>
				</view> -->
				<view class="lkbuynum">
					<view class="textdiv">
						<view class="buynum">数量</view>
						<!-- <view class="shengyu" v-if="{{goodsStock>0}}">剩余{{goodsStock}}件</view> -->
					</view>
					<view class="cart-count-box">
						<view @click="reducenum" class="cart-count-down"><image class="image" src="/static/icon/jian.png"></image></view>
						<input type="number" :value="skunum" disabled="true" />
						<view @click="addnum" class="cart-count-add"><image class="image" src="/static/icon/jia.png"></image></view>
					</view>
				</view>
			</scroll-view>
			<view class="lkbuybtn" @click="clickorderbtn">确定</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		isshow: {
			type: Boolean,
			default: () => {
				return false;
			}
		},
		goodsobj:{
			type: Object,
			default: () => {
				return {};
			}
		},
		goodsSku:{
			type: Array,
			default: () => {
				return [];
			}
		},
		skuobj:{
			type: Object,
			default: () => {
				return {};
			}
		},//选择的规格
	},
	data() {
		return {
			goodsName:"",//商品名称
			goodsImgurl:"",
			goodsPrice:0,
			goodsStock:0,
			skunum:1,
			goodsSku1:[],
			goodsSku2:[],
			skuindex1: 0, //选中的一级规格下标
			skuindex2: null, // 二级规格选择的下标
		};
	},
	mounted() {
		this.updateSku()
	},
	watch: {
	    skuobj: {
	        handler(newVal, objVal) {
	            this.updateSku(newVal)
	        },
	    }        
	},
	methods: {
		//更新信息
		updateSku(newVal){
			if(this.skuobj&&this.skuobj.skuVal){
				this.goodsName = this.skuobj.skuVal
				this.goodsImgurl = this.goodsobj.goods_thumb
				this.goodsPrice = (Number(this.skuobj.skuPrice)+Number(this.goodsobj.shop_price)).toFixed(2)
			    this.goodsStock = Number(this.skuobj.stockNum)
			}else{
				this.goodsName = this.goodsobj.goods_name
				this.goodsImgurl = this.goodsobj.goods_thumb
				this.goodsPrice = this.goodsobj.shop_price
				this.goodsStock = Number(this.goodsobj.defaultSkuStore)
			}
		},
		//关闭
		clickcloseSku() {
			this.$emit('clickcloseSku');
		},
		//一级规格
		clickSku1(skuindex,index){
			this.skuindex1 = index
			var skuobj = this.goodsSku[skuindex].skuValList[index]
			this.$emit("selectGoodssku",skuobj)
		},
		//二级规格
		clickSku2(skuindex,index){
			this.skuindex2 = index
			// var skuobj = this.goodsSku[skuindex].skuValList[index]
			// this.$emit("selectGoodssku",skuobj)
		},
		//增加数量	
		addnum() {
			var newnum = Number(this.skunum) + 1;
		    if (this.goodsStock < newnum) {
		      //商品无库存
		      uni.showToast({
		        title: "库存不足",
		        icon: "none",
		        duration: 1500,
		      });
			  return;
		    }
			this.skunum = newnum
		},
		//减少数量	
		reducenum() {
		  var newnum = Number(this.skunum) - 1;
		  if (newnum<=0) {
		     return;
		  }
		  this.skunum = newnum
		},
		//确认
		clickorderbtn(){
			var skuobj = {}
			if(this.skuobj&&this.skuobj.skuVal){
				skuobj["skuobj"] = this.skuobj
				skuobj["number"] = this.skunum
			}else{
				skuobj["skuobj"] = null
				skuobj["number"] = this.skunum
			}
			this.$emit("clickorderbtn",skuobj)
		},
		
	}
};
</script>

<style lang="scss" scoped>
/* 规格弹窗 */
.lkbuydiv {
	width: 100%;
	height: 100vh;
	position: fixed;
	bottom: 0;
	background-color: black;
	opacity: 0.6;
	z-index: 888;
}

.lkbuy {
	width: 100%;
	height: 85%;
	position: fixed;
	bottom: 0;
	background-color: #ffffff;
	z-index: 999;
}

.lkbuy .listItem {
	padding: 32rpx;
	background-color: #fff;
	border-bottom: 1rpx solid #f0f0f0;
	display: flex;
	align-items: flex-end;
	align-content: center;
	justify-content: space-between;
	position: relative;
}

.lkbuy .listItem image {
	width: 200rpx;
	height: 200rpx;
	/* margin-right: 8rpx; */
	// background-color: #f4f4f4;
	border-radius: 8rpx;
}

.lkbuy .listItem .contentBox {
	flex: 1;
	position: relative;
	margin-left: 32rpx;
}

.lkbuy .listItem .sku_close {
	width: 40rpx;
	height: 40rpx;
	position: absolute;
	right: 32rpx;
	top: 32rpx;
	z-index: 888;
}

.lkbuy .listItem .contentBox .title {
	overflow: hidden;
	-webkit-line-clamp: 2;
	/*text-overflow: ellipsis;*/
	display: -webkit-box;
	-webkit-box-orient: vertical;
	font-size: 30rpx;
	font-weight: bold;
	color: #6d6d6d;
}

.lkbuy .listItem .contentBox .priceBox {
	height: 60rpx;
	line-height: 60rpx;
	font-size: 32rpx;
	color: #ff4f3b;
}

.lkbuy .listItem .contentBox .priceBox text {
	font-size: 48rpx;
}

.lkbuy .listItem .contentBox .goodsStock {
	height: 32rpx;
	font-size: 24rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: rgba(125, 131, 145, 1);
	line-height: 32rpx;
}

.lkbuy .listItem .contentBox .service {
	/* height:40rpx; */
	font-size: 32rpx;
	margin-top: 24rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: rgba(56, 63, 78, 1);
	line-height: 40rpx;
}

.lkbuy .listItem .constPrice {
	font-size: 28rpx;
	color: #bfbfbf;
	text-decoration: line-through;
	margin-left: 10rpx;
}

.lkbuy .lkbuybtn {
	position: absolute;
	bottom: 32rpx;
	left: 32rpx;
	width: 686rpx;
	height: 88rpx;
	line-height: 88rpx;
	background: linear-gradient(90deg, rgba(255, 97, 86, 1) 0%, rgba(255, 61, 47, 1) 100%);
	text-align: center;
	color: #ffffff;
	font-size: 32rpx;
	font-weight: 500;
	border-radius: 88rpx;
}

.lkbuy .skudiv {
	padding: 28rpx 32rpx;
	/* border-bottom: 1px solid #ededed; */
}

.lkbuy .skudiv .skutext {
	font-size: 28rpx;
	margin-bottom: 18rpx;
}

.lkbuy .skudiv .divitem {
	display: inline-block;
	margin-right: 15rpx;
	border: 1rpx solid #eaebec;
	background-color: #F4F4F4;
	border-radius: 10rpx;
	padding: 12rpx 20rpx;
	color: #323744;
}

.lkbuy .skudiv .divitem_no {
	display: inline-block;
	margin-right: 15rpx;
	background: #ededed;
	border: 1rpx solid #eaebec;
	border-radius: 10rpx;
	padding: 12rpx 20rpx;
	opacity: 0.3;
}

.lkbuy .skudiv .divitem_cur {
	display: inline-block;
	margin-right: 15rpx;
	border: 1rpx solid#FF4F3B;
	color: #ff4f3b;
	border-radius: 10rpx;
	padding: 12rpx 20rpx;
	background-color: #FFF5F4;
}

.lkbuy .skudiv .itemtext {
	font-size: 25rpx;
}

.lkbuy .lkbuynum {
	padding: 0 32rpx;
	height: 108rpx;
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: space-between;
}

.lkbuy .textdiv {
	font-size: 30rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: rgba(0, 0, 0, 1);
}

.lkbuy .textdiv .shengyu {
	font-size: 26rpx;
	color: #a0a0a0;
}

.lkbuy .lkbuynum .cart-count-box {
	width: 180rpx;
	height: 60rpx;
	/*给主容器设一个边框*/
	border: 1rpx solid #ccc;
	border-radius: 4rpx;
	float: right;
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: space-between;
}

.lkbuy .lkbuynum .cart-count-down,
.cart-count-add {
	width: 60rpx;
	height: 60rpx;
	line-height: 60rpx;
	text-align: center;
	vertical-align: middle;
}

.lkbuy .lkbuynum .cart-count-box .image {
	width: 24rpx;
	height: 24rpx;
}

.lkbuy .lkbuynum input {
	width: 58rpx;
	height: 50rpx;
	line-height: 50rpx;
	margin: 0 auto;
	text-align: center;
	font-size: 26rpx;
	color: #323744;
	/*给中间的input设置左右边框即可*/
	border-left: 1rpx solid #ccc;
	border-right: 1rpx solid #ccc;
}
</style>
